<html>
    <head>
        <title>事件处理</title>
    </head>
    <body>
        <script>
            // ★、事件处理

                          // ★一、事件监听
                                        /*
                                            可以使用 v-on 指令监听DOM事件，并在出发时运行一些 JavaScript代码。
                                        */
                                             /*
                                                eg:
                                                    <div id="example-1">
                                                        <button v-on:click="counter +=1">Add 1</button>
                                                        <p> The button above has been clicked {{ counter}} times.</p>
                                                    </div>
                                             */
                                                var example-1=new Vue({
                                                    el:'#example-1',
                                                    data:{
                                                        counter:0
                                                    }
                                                })

                          // ★二、事件处理方法
                                        /*
                                              然而许多时间处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。
                                              因此 v-on 还可以接收一个需要调用的方法名称。
                                        */
                                                /*
                                                    eg:
                                                        <div id="example-2">
                                                            <button v-on:click="greet">Greet</button>
                                                        </div>
                                                */
                                                    var example2=new Vue({
                                                        el:'#example-2',
                                                        data:{
                                                            name:'Vue.js'
                                                        },
                                                        // 在'methods'对象中定义方法
                                                        methods:{
                                                            greet:function(event){
                                                                alert('Hello'+this.name+'!')
                                                            }
                                                        }
                                                    });

                                                    // 也可以直接调用方法
                                                    example2.greet();

                          // ★三、内联处理器中的方法
                                        /*
                                            除了直接绑定到一个方法，也可以在内联JS语句中调用方法：
                                        */
                                              /*
                                                    eg:
                                                      <div id="example-3">
                                                          <button v-on:click="say('hi')">Say hi</button>
                                                          <button v-on:click="say('whar')">Say What</button>
                                                      </div>
                                              */
                                                      new Vue({
                                                        el:'#example-3',
                                                        methods:{
                                                            say:function(message){
                                                                alert(message);
                                                            }
                                                        }
                                                      })

                                        /*
                                            有时也需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量 $event 把它传入方法：
                                        */
                                                /*
                                                    eg:
                                                        <button v-on:click="warn('Form cannot be submitted yet',$event)">
                                                            Submit
                                                        </button>
                                                */
                                                     methods:{
                                                        warn:function(message,event){
                                                            if(event){
                                                                event.preventDefault();
                                                            }
                                                            alert(mesasge);
                                                        }
                                                     }

                         // ★四、事件修饰符
                                        /*
                                            在事件处理程序中调用 event.preventDefault() 或者 event.stopPropagation() 是非常常见的需求。
                                            尽管我们可以在方法中轻松实现这点，但是更好的方式是： 方法只有纯粹的数据逻辑，而不是去处理DOM事件的细节。

                                            为了结局这个问题，Vue.js 为v-on 提供了"事件修饰符" .
                                            之前提过，修饰符是由点开头的指令后缀来表示的。

                                                     .stop
                                                     .prevent
                                                     .capture
                                                     .self
                                                     .once
                                                     .passive
                                        */

                                        /*
                                              详解：
                                                    
                                                   .stop
                                                   阻止事件继续冒泡(传播)
                                                   <a v-on:click.stop="doThis"></a>

                                                   .prevent
                                                   提交页面不在重载页面(阻止DOM事件的默认行为)
                                                   <form v-on:submit.prevent="onSubmit"></form>

                                                   串联
                                                   修饰符可以串联
                                                   <a v-on:click.stop.prevent="doThat"></a>


                                                   只有修饰符
                                                   <form v-on:submit.prevent></form>

                                                   事件捕获(所谓捕获，就是将事件据为己有,自己先处理，然后才交给内部元素进行处理)
                                                   添加事件监听器时使用事件捕获模式
                                                   即内部元素触发的事件现在此处理，然后才交由内部元素进行处理
                                                   <div v-on:click.capture="doThis">...</div>

                                                   .self
                                                   只有在event.target是当前元素自身时触发处理器函数
                                                   即事件不是从内部元素触发的
                                                   <div v-on:click.self="doThat">...</div>


                                                   事件只会被触发一次
                                                   <a v-on:click.once="doThis"></a>
                                        */

                                        /*
                                              注意：  
                                                   使用事件修饰符时，顺序很重要；
                                                   相应的代码会以同样的顺序产生作用。

                                                   因此,用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击
                                        */

                                        /*
                                                .once
                                                   事件只会被触发一次
                                                   <a v-on:click.once="doThis"></a>

                                                   不像其他只能对原生DOM事件起作用的修饰符， .once 修饰符还能被用到自定义的 "组件事件上"。
                                                    (如果你还没有阅读关于组件的文档，现在大可不必担心)
                                        */

                                        /*
                                                .passive

                                                    Vue 还对应 addEventLister 中的 passive 选项提供了 .passive 修饰符

                                                    --滚动事件的默认行为(即滚动行为)将里立即触发 --
                                                    --而不会等待 'onScroll'完成
                                                    --这其中包含 'event.preventDefault()'的情况

                                                    <div v-on:scroll.passive="onScroll">...</div>

                                                    这个.passive 修饰符尤其能够提升移动端的性能。


                                                注意： 不要把 .passive 和 .prevent 一起使用，因为　.prevent 将会被忽略，同时浏览器会向你展示一个警告。

                                                      请记住， .passive 会告诉浏览器你不想阻止事件的默认行为
                                        */


                        // ★五、按键修饰符
                                        
                                        /*
                                            在监听键盘事件时，我们经常需要检查详细的按键。
                                            Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
                                        */
                                                /*
                                                     只有在'key' 是 'Enter'时调用 'vm.submit()'

                                                     <input v-on:keyup.enter="submit">
                                                */
                                        /*
                                            你可以直接将 KeyboardEvent.key暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

                                               eg：
                                                     <input v-on:keyup.page-down="onPageDown">
                                                 
                                                     在上述示例中，处理函数只会在 $event.key 等于 PageDown时被调用。
                                        */

                        // ★六、系统修饰符



                        // ★七、鼠标按钮修饰符

                                        /*
                                             .left
                                             .right
                                             .middle

                                             这些修饰符会限制处理函数仅响应特定的鼠标按钮。
                                        */
                                        
        </script>
    </body>
</html>